<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>干燥管理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../static/css/font-awesome.min.css" rel="stylesheet" />
    <!-- bootstrap-table 表格插件样式 -->
    <link href="../static/ajax/libs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link href="../static/css/animate.css" rel="stylesheet" />
    <link href="../static/css/style.css" rel="stylesheet" />
    <link href="../static/ruoyi/css/ry-ui.css" rel="stylesheet" />


    <link href="../static/ajax/libs/jquery-layout/jquery.layout-latest.css" rel="stylesheet" />
    <style>
        .echarts{
            height: 300px !important;
        }

    </style>

</head>
<body class="gray-bg">

<div class="container-div">

    <div class="row">
        <div class="col-sm-12">

            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="pull-left">
                        <h5>XX生产线 xxx步骤 xxx机器 实时数据</h5>
                    </div>
                    <div class="pull-right btn-group btn-group-sm" role="group">
                        <button class="btn btn-danger" type="button">急停</button>
                        <button class="btn btn-info" type="button">联机</button>
                        <button class="btn btn-danger" type="button">断开</button>
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="row">
                        <div class="col-sm-8">
                            <div class="echarts" id="gz">

                            </div>
                            <div class="echarts" id="gz2">

                            </div>
                        </div>
                        <div class="col-sm-4">

                            <div class="panel panel-info" >
                                <div class="panel-heading">
                                    参数标准
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-6 b-r">

                                            <div class="form-group">
                                                <label>温度:</label>
                                                <label>${query.temperature}</label>
                                            </div>
                                            <div class="form-group">
                                                <label>含水量:</label>
                                                <label>${query.waterContent}</label>
                                            </div>

                                        </div>
                                        <div class="col-sm-6">

                                            <div class="form-group">
                                                <label>风扇转速:</label>
                                                <label>${query.fanSpeed}</label>
                                            </div>
                                            <div class="form-group">
                                                <label>设备转速:</label>
                                                <label>${query.drumSpeed}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-danger">
                                <div class="panel-heading">
                                    参数调整
                                </div>
                                <form class="form-Dry-body" id="form-Dry-body" >
                                    <div class="panel-body">

                                        <div class="row">
                                            <div class="col-sm-6 b-r">

                                                <div class="form-group">
                                                    <label>温度</label>
                                                    <input type="text" name="temperature" class="form-control">
                                                </div>
                                                <div class="form-group">
                                                    <label>含水量</label>
                                                    <input type="text"  name="waterContent" class="form-control">
                                                </div>

                                            </div>
                                            <div class="col-sm-6">

                                                <div class="form-group">
                                                    <label>风扇转速</label>
                                                    <input type="text"  name="fanSpeed" class="form-control">
                                                </div>
                                                <div class="form-group">
                                                    <label>设备转速</label>
                                                    <input type="text" name="drumSpeed" class="form-control">
                                                </div>
                                                <div class="form-group">
                                                    <button type='button' class='btn btn-white' onclick="changeRealDry()" data-dismiss='modal'>提交</button>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal fade" id="twistModal" tabindex="-1"
         role="dialog" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" id="twistStandardDetail">

            </div>
            <small class="font-bold"> </small>
        </div>
    </div>
</div>

<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<!-- bootstrap-table 表格插件 -->
<script src="../static/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../static/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../static/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="../static/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<script src="../static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js"></script>
<!-- jquery-validate 表单验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js"></script>
<script src="../static/ajax/libs/validate/jquery.validate.extend.js"></script>
<!-- jquery-validate 表单树插件 -->
<script src="../static/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>

<!-- 遮罩层 -->
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="../static/ajax/libs/iCheck/icheck.min.js"></script>
<script src="../static/ajax/libs/layer/layer.min.js"></script>
<script src="../static/ajax/libs/layui/layui.js"></script>
<script src="../static/ruoyi/js/common.js?v=4.0.0"></script>
<script src="../static/ruoyi/js/ry-ui.js?v=4.0.0"></script>

<!--Echarts -->
<script src="../static/ajax/libs/report/echarts/echarts-all.js"></script>
<script src="../static/ruoyi/controller.js"></script>

<script src="../static/ajax/libs/jquery-layout/jquery.layout-latest.js"></script>

<script>
    window.onload = function () {
           $.ajax({
                    url: rootPath + "/getStandardByStandarBdId.do",
                    type:"POST",
                    data:"standerId=31",
                    success : function (response) {

            }
        });
    }
    function getRootPath() {
        let href = window.document.location.href;
        let pathName = window.document.location.pathname;
        let index = href.indexOf(pathName);
        let localhost = href.substring(0, index);
        let project = pathName.substring(0, (pathName.substr(1)
            .indexOf('/')) + 1);

        return (localhost + project);
    }
    var rootPath = getRootPath();
    /**
     * 干燥数据：滚筒转速和风扇转速
     */
        // 基于准备好的dom，初始化echarts实例
    let dryChart = echarts.init(document.getElementById("gz"));  //根据ID获取chart

    let time = $.echarts.time;

    let dryoption = $.echarts.getDoubleLineOption("干燥实时数据",['滚筒转速 rpm', '风扇转速 rpm']); //得到option

    $.echarts.setChartInterval(dry,time*6);  //开启定时器，执行指定函数f

    /**
     * 进行数据模拟函数，并将数据动态写入指定的option
     */
    function dry() {
        $.ajax({
            url : rootPath
            + "/getDryRealTimeDate.do",
            type : "POST",
            dataType : "json",
            success : function(response) {
                let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

                let data_3 = response.data_3;
                let data_4 = response.data_4;


                dryoption = $.echarts.setDynamicData(dryoption,axisData,data_3,data_4);

                dryChart.setOption(dryoption);

            }
        });
    }
    /**
     * 干燥数据：温度
     */
        // 基于准备好的dom，初始化echarts实例
    let dryChart2 = echarts.init(document.getElementById("gz2"));  //根据ID获取chart

    let dryoption2 = $.echarts.getDoubleLineOption("",['温度 \'C', '含水量 %']); //得到option

    $.echarts.setChartInterval(dry2,time*6);  //开启定时器，执行指定函数f

    /**
     * 进行数据模拟函数，并将数据动态写入指定的option
     */
    function dry2() {
        $.ajax({
            url : rootPath
            + "/getDryRealTimeDate.do",
            type : "POST",
            success : function(response) {
                var rq = eval("("+response+")");

                let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

                let data_1 = rq.data_1;
                let data_2 = rq.data_2;

                dryoption2 = $.echarts.setDynamicData(dryoption2,axisData,data_1,data_2);

                dryChart2.setOption(dryoption2);

            }

        });
    }

    function changeRealDry() {
        let data = $("form.form-Dry-body").serialize();
        $.ajax({
            url: rootPath + "/changeRealDry.do",
            type:"POST",
            data : data,
            success : function (response) {
                alert("成功了");
            },
        });
    }

</script>

</body>
</html>

